<template>
  <div class="div">
    <div class="menu" v-if="flag">
        <div class="item">
          <router-link to="/home">菜单一</router-link>
        </div>
        <div class="item">
          <router-link to="/page2">菜单二</router-link>
        </div>
        <div class="item">
          <router-link to="/page3" @click="login">菜单三</router-link>
        </div>
  </div>
  <LoginVue :judges="judge" :title="title"
  @queding="queding" @quxiao="quxiao"
  >
    <template #no1>
      <p>这是我的插槽一传递的值</p>
    </template>
     <template #no2>
      <p>这是我的插槽二传递的值</p>
    </template>
     <template #no3>
      <p>这是我的插槽二传递的值</p>
    </template>
  </LoginVue>
  <router-view></router-view>
  </div>
</template>
<!-- 路由的原理就是当地址栏发生改变的时候根据地址跳转到对应的网页 -->
<script setup>
import LoginVue from './views/Login.vue';
import {flagstore} from './store'
import {computed,ref} from 'vue'
let flagstor=flagstore()
let flag =  computed(()=>{
  return flagstor.flag
})


let judge = ref(false)//组件的唤起和传值
let title = ref("这是我title传的值")
let login = ()=>{
judge.value=true
}
let queding = ()=>{
  alert("欢迎进入菜单三")
  judge.value=false
}
let quxiao = ()=>{
  judge.value=false
}
// import { reactive,ref,onMounted} from 'vue'; //reactive为复杂数据类型
// //onMounted页面结构加载完成
// import page1 from './views/Page1.vue'
// import page2 from './views/Page2.vue'
// import page3 from './views/Page3.vue'
// import Notfound from './views/Notfound.vue'
// let com = ref(page1)
// let data = reactive({
//   index:1,
//   menu:[{id:1,msg:"菜单一",com:page1,path:"/"},
//   {id:2,msg:"菜单二",com:page2,path:"/page2"},
//   {id:3,msg:"菜单三",com:page3,path:"/page3"}]
// })
// let changemenu = (item)=>{
//   data.index=item.id
//   com.value=item.com
// }
// onMounted(()=>{
//   // console.log('页面结构加载完成');
//   // 一般用于定时器和DOM操作
//  window.onhashchange = ()=>{
//    let hash =   window.location.hash;  //   '#/路径'
//   // console.log(hash);
//   if(hash==''){
//     changemenu(data.menu[0])
//   }else{
//     let pathList = hash.split('/');
//     let path =pathList[1];
//     let itemList = data.menu.filter(item=>item.path=="/"+path)
//     if(!itemList.length){
//       com.value=Notfound
//     }else{
//       let item = itemList[0];
//       changemenu(item)
//     }

//   }
//  }
// })
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.menu{
  display: flex;
  width: 100%;
  height: 30px;
}
.menu>.item{
  flex: 1;
  text-align: center;
  line-height: 30px;
  background-color: skyblue;
  color: white;
}
.item>a{
  text-decoration: none;
}
/* .menu .active{
  background-color: red;
} */
.router-link-exact-active{
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
}
</style>